<template>
	<view class="comTime" @click="hideTime">
		<view class="popBox" @click.stop="">
			<image @click.stop="hideTime" src="@/static/images/7.png" mode="widthFix" class="cha"></image>
			<view class="tit">
				<text>选择日期</text>
			</view>
			<view class="content"> 
				<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
					</picker-view-column>
				</picker-view>
			</view>
			<view class="btns">
				<text class="err" @click.stop="hideTime">取消</text>
				<text class="succ" @click.stop="sendTime">确定</text>
			</view>
		</view>
	</view>
</template> 

<script>
	export default {
		name:"comTime",
		props:{
			currentDate:{
				type:String,
				default:''
			}
		},
		data() {
			const date = new Date()
			const years = []
			const months = []
			const days = []
			for (let i = 1990; i <= date.getFullYear(); i++) {
				years.push(i)
			}
			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}
			for (let i = 1; i <= 31; i++) {
				days.push(i)
			}
			return {
				years,
				year:'',
				months,
				month:'',
				days,
				day:'',
				value: [],
				visible: true,
				indicatorStyle: `height: 50px;`
			};
		},
		mounted() {
			
			
			
			// console.log('获取传来的数据',this.currentDate);
			
			
			let timeArr = this.currentDate.split('-')
			this.value = [timeArr[0]-1990,timeArr[1]-1, timeArr[2]-1] 
			console.log(timeArr,this.value);
			this.year = timeArr[0]
			this.month = timeArr[1]
			this.day = timeArr[2]
			// const day = date.getDate()
		},
		methods:{
			 bindChange: function (e) {
				const val = e.detail.value
				this.year = this.years[val[0]]
				this.month = this.months[val[1]]
				this.day = this.days[val[2]]
			},
			hideTime(){
				this.$emit('hideTime')
			},
			sendTime(){
				this.month = this.month > 9 ? this.month : '0' + this.month;
				this.$emit('sendTimeFun',{
					value:`${this.year}-${this.month}-${this.day}`
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.comTime{
		width: 100%;
		height: 100vh;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		background: rgba(#000,0.5);
		.popBox{
			width: 100%;
			background: #fff;
			box-sizing: border-box;
			border-radius: 30rpx 30rpx 0 0;
			padding: 30rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: relative;
			.cha{
				position: absolute;
				right: 20rpx;
				top: 20rpx;
				width: 48rpx;
			}
			.tit{
				font-weight: 500;
				font-size: 30rpx;
				color: #000;
				margin-bottom: 30rpx;
			}
			.content{
				width: 100%;
				.picker-view {
					width: 100%;
					height: 300rpx;
					margin-top: 20rpx;
				}
				.item {
					line-height: 100rpx;
					text-align: center;
					font-weight: 400;
					font-size: 30rpx;
					color: #000;
				}
				/deep/.uni-picker-view-mask{
					background: none;
				}
				.uni-picker-view-indicator:before{
					border-top: 2rpx solid #EBEFF2;
				}
				.uni-picker-view-indicator:after{
					border-bottom: 2rpx solid #EBEFF2;
				}
			}
			.btns{
				width: 100%;
				margin-top: 30rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;
				text{
					font-weight: 500;
					font-size: 30rpx;
					width: 336rpx;
					height: 90rpx;
					border-radius: 45rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					&.err{
						background: #F2F6FA;
						color: #787C80;
					}
					&.succ{
						background: linear-gradient(90deg, #D2EF41 0%, #A4DD53 100%);
						color: #5E960F;
					}
				}
			}
		}
	}
</style>